import React, { useReducer } from 'react'

// 要使用useReducer,要先定义初始数据
const initState = { c: 1, msg: 'hook' }
// 要定义reducer函数.redcuer函数的作用:修改状态数据

// 当调用了dispatch,reducer才会执行
function reducer(state, action) {
  console.log('reducer', state, action)
  // state就是useReducer管理的状态
  // action 需求对象.用来描述如何修改state数据. 一般要求action对象中至少写一个type属性,type属性的值是字符串,用来描述需求
  switch (action.type) {
    case 'inc':
      // reducer函数中return什么,则useReducer管理的状态数据就被赋值为什么
      return {
        // ...state, // 展开状态中所有数据,目的是保留其他数据
        // 属性: 目标值
        c: state.c + action.num,
      }
    // 注意: 因为写了return.所以不需要再写break了
  }
}

export default function App() {
  // state就是状态
  // dispatch是修改状态的方法
  const [state, dispatch] = useReducer(reducer, initState)
  console.log(state)
  return (
    <div>
      App
      <hr />
      <p>{state.c}</p>
      <p>{state.msg}</p>
      <button
        onClick={() => {
          // dispatch(action对象)
          dispatch({ type: 'inc', num: 9 })
        }}
      >
        +
      </button>
    </div>
  )
}
